<template>
	<view class="recommend">
		<!-- 推荐沙石组件 -->
		<view class="recomBox" v-for="item in reco" :key="item.id" @click="goDetails">
			<image :src="item.imgList[0].url" mode="aspectFill"></image>
			<view class="describe">
				<view class="sandName">
					<text>【{{item.categoryName}}】</text>{{item.name}}
				</view>
				<view class="price">
					<view>
						当前￥<text class="nowPrice">{{item.openingPrice}}元</text>
					</view>
					<view>
						供应量：<text>{{item.supplyAmount}}吨</text>
					</view>
				</view>
				<view class="des">
					<view>
						<text class="expextTime">{{item.startTime}}</text>
					</view>
					
					<!-- auctionStatus 0=未开始 1=已开始 2=已结束-->
					<!-- signUp 1=报名 0=未报名 -->
					<button v-if="item.auctionStatus == 0" :class="(item.signUp == 1 || item.payType == 2) ? '' : 'active'">{{(item.signUp == 1 || item.payType == 2) ? '已报名':'立即报名'}}</button>
					<button :class="item.signUp != 1 ? '':'active'" v-if="item.auctionStatus == 1">{{item.signUp == 1 ? '立即出价':'未报名'}}</button>
					<button v-if="item.auctionStatus == 2">已结束</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Recommended",
		props:{
			reco:{
				type:Object
			}
		},
		data() {
			return {
				isApply:false
			};
		},
		methods: {
			goDetails() {
				uni.navigateTo({
					url:'/subPages/pages/auctionDetails/auctionDetails'
				})
			}
		}
	}
</script>

<style lang="scss">
.recommend {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.recomBox {
	display: flex;
	flex-direction: column;
	width: 320rpx;
	height: 480rpx;
	background-color: #fff;
	border-radius: 8px;
	margin-bottom: 10px;
}
.recomBox  image {
	width: 160px;
	height: 160px;
	border-radius: 8px 8px 0 0;	
}
.describe {
	padding: 8px;
}
.describe >text {
	// padding-bottom: 10px;
}
.sandName > text {
	margin-left: -7px;
	font-weight: 600;
}
.price {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 8px;
	margin-bottom:10px;
}
.nowPrice {
	font-size: 16px;
}
.des {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: inherit;
	font-size: 10px;
}
.expextTime {
	color: #A1A1A1;
	padding-right: 15rpx;
}
.des > button {
	width: 51px;
	height: 20px;
	line-height: 20px;
	background-color: #a8a8a8;
	font-size: 20rpx;
	padding-left: 5rpx;
	padding-right: 5rpx;
	color: #fff;
}
.des > button.active {
	background-color: #ff8f1f;
}
</style>